<template>
  <div>
    <transition name="van-slide-right">
      <div v-show="visible">
        <van-nav-bar
          title="我的"
          left-arrow
          @click-left="$router.push('/user')"
        />
        <van-uploader> </van-uploader>
        <van-cell title="头像" is-link class="toxian">
          <div class="upload">
            <span class="imgs">
              <img :src="baseURL + '/img/' + userinfo.avatar" alt="" />
            </span>
          </div>
        </van-cell>
        <van-cell title="用户名" is-link :value="userinfo.username" />
        <van-cell title="收货地址" is-link />
        <h5>账号绑定</h5>
        <van-cell title="手机" icon="graphic" is-link />
        <h5>安全设置</h5>
        <van-cell
          title="登录密码"
          is-link
          value="修改"
          @click="$router.push('/change_password')"
        />
        <van-button type="danger" block>退出登录</van-button>
      </div>
    </transition>
  </div>
</template>

<script>
import { user } from "../api/user";
import axios from "../utils/request";
export default {
  data() {
    return {
      userinfo: [],
      visible: false,
      baseURL: axios.defaults.baseURL,
    };
  },
  created() {
    user(JSON.parse(localStorage.getItem("token"))).then((res) => {
      this.userinfo = res.data;
    });
  },
  mounted() {
    this.visible = true;
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #3190e8;
  .van-nav-bar__arrow {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
/deep/.van-uploader {
  width: 99%;
  position: absolute;
  top: 9%;
  left: 1%;
  opacity: 0;
  z-index: 999;
  .van-uploader__upload {
    width: 99%;
  }
}
/deep/.van-cell__left-icon {
  color: #10aeff;
}
/deep/.toxian {
  line-height: 70px;
  margin-top: 15px;
  .van-cell__right-icon {
    line-height: 70px;
  }
}
.upload {
  width: 100%;
  height: 0;
  border-bottom: #ccc;
  .imgs {
    margin-top: 2px;
    display: inline-block;
    width: 60px;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
}
h5 {
  margin: 15px 10px;
}
/deep/.van-button {
  background-color: #d8584a;
  width: 95%;
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 5px;
}
</style>